<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=yes">
<title>404</title>
<style>
*{ padding:0; margin:0;}
body,html{ height:100%;   background: #34495E;   font: 14px/1.5 "Hiragino Sans GB","Microsoft YaHei","Wenquanyi Micro Hei","WenQuanYi Micro Hei Mono","WenQuanYi Zen Hei","WenQuanYi Zen Hei","Apple LiGothic Medium",SimHei,"ST Heiti","WenQuanYi Zen Hei Sharp";}
.error_box{background: url(${ctx}/fc/images/error_bg.png)  center;text-align:center; height:100%; padding:0 5%;}
.box_img{ width:50%; margin:0 auto;}
img{ border:0; display:block; margin:0 auto; }
.ball_img{ padding:45px 0 25px;}
h4{ margin:20px auto; color:#fff; font-size:34px;  letter-spacing: 2px;}
p{ font-size:16px; color:#fff;}
.index_btn{ cursor:pointer; display:block; width:120px; height:35px; line-height:35px; background:#6289af; color:#fff; text-align:center; margin:20px auto}
.index_btn:hover{  background:#537BA1;}
.mod_info1__flash1 {bottom:20%;right:10%;}
.mod_info1__flash2 {top:20%;right:10%;}
.mod_info1__flash3 {top:40%;left:10%;}
.mod_info1__f {position: absolute;width: 34px;height: 34px;background: url(${ctx}/fc/images/flash.png);_display: none;}
.mod_info1__f {animation: flash 5s .2s ease-in-out infinite both;-webkit-animation: flash 5s .2s ease-in-out infinite both;-moz-animation: flash 5s .2s ease-in-out infinite both;}
@keyframes flash {0%, 100%, 50% {opacity:1}25%, 75% {opacity:0}}
@-webkit-keyframes flash {0%, 100%, 50% {opacity:1}25%, 75% {opacity:0}}
@-moz-keyframes flash {0%, 100%, 50% {opacity:1}25%, 75% {opacity:0}}
.rocket_animatian{	-webkit-animation: tinyY 1s both infinite linear alternate;animation: tinyY 1s both infinite linear alternate;}
@-webkit-keyframes tinyY {0% {-webkit-transform: translateY(-5px);}100% {-webkit-transform: translateY(5px);}}
@keyframes tinyY {0% {transform: translateY(-8px);}100% {transform: translateY(8px);}}
.error_text{text-align:left; margin:20px auto; font-size:14px; width:120px; line-height:20px; color:#A8ACB3; }
@media (min-width:320px) and (max-width:1200px) {
  img{ width:100%;}
  .rocket_img{ width:40%;}
  .error_text{display:none;}
}
</style>
</head>
<body>
<div class="error_box">
    <div class="mod_info1__flash1 mod_info1__f"></div>
    <div class="mod_info1__flash2 mod_info1__f"></div>
    <div class="mod_info1__flash3 mod_info1__f"></div>
    <div class="box_img">
        <img class="ball_img" src="${ctx}/fc/images/ball.png" width="180px" />
        <img class="rocket_img rocket_animatian" src="${ctx}/fc/images/rocket.png" width="50px"/>
    </div>
    <h4>500</h4>
    <p>系统更新中,请稍后再试</p>
<!--     <p class="error_text">可能原因：<br/> -->
<!--     网络信号弱<br/> -->
<!--     找不到请求页面<br/> -->
<!--     输入的网址不正确<br/> -->
<!--     </p> -->
    <a class="index_btn">返回</a>
</div>
</body>
</html>
